<template>
	<view class="chat_container">
		<view class="chat_massege_box" @click="hideAction">
			<!-- <view class="history_onload">
				{{historyOnload ? '已经没有更多的历史消息' : '下拉获取历史消息'}}
			</view> -->
			<view class="msg_item" v-if="deptRedPacketInfo.allNum > 0">
				<view class="sender">
					<view class="sender_header">
						<image src="../../static/images/massage/red_box.png" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="item_content" @click="showRedPacketHandle">
					<view class="sender_nickname">{{dept.teacherName}}</view>
					<view class="msg_content red_packet_box"
						:class="{'getRedpacket':redPacketLog.state == 2 || redPacketLog.state == 3 }">
						<view class="red_packet_top">
							<view class="red_packet_gold" v-show="redPacketLog.state != 2 && redPacketLog.state != 3">
								開
							</view>
						</view>
						<view v-show="redPacketLog.state == 2 || redPacketLog.state == 3 " class="red_packet_info">
							已领取
						</view>
						<view class="red_packet_info">
							好好学习, 天天向上
						</view>
					</view>
				</view>
			</view>
			<view v-if="redPacketLog.state == 2 || redPacketLog.state == 3 " class="msg_tip msg_red">
				<text
					class="msg_tip_name">{{redPacketLog.empName}}</text>同学已领取红包，{{blankBinds.length > 0 ? '待发放金额。': '未开通校园电子账户'}}
				<view @click="toBindBlank" class="tip_hanld" v-if="blankBinds.length == 0">点击此处开通校园电子钱包</view>
				<view @click="fristRecharge" class="tip_hanld" v-if="blankBinds.length>0 && isFrist==0">点击进行首次充值
				</view>
			</view>
		</view>
		<view class="action_box">
			<view class="send_box" @click="hideAction">
				<!-- <view class="radio">
					<image class="icon" src="../../static/images/massage/voice.png" mode="voice"></image>
				</view> -->
				<view class="input_box">
					<input type="text" placeholder-class="input_disabled" disabled="disabled" placeholder="全体禁言中"
						v-model="input.message" @blur="inputBlur" @focus="inputFocus" @click.stop="inputFocus" />
				</view>
				<!-- <view class="emoji" @click.stop="showEmoji">
					<image class="icon" src="../../static/images/massage/emoji.png" mode="scaleToFill"></image>
				</view>-->
				<view class="more_media" v-show="input.message == ''" v-if="dept.teacher"><!--  -->
					<image class="icon" @click.stop="showMedia" src="../../static/images/massage/add_circle.png"
						mode="scaleToFill"></image>
				</view>
				<view class="send">
					<view class="send_btn" v-show="input.message != ''">
						<!-- <mo-button size="mini">发送</mo-button> -->
						<image class="icon" @click.stop="showMedia" src="../../static/images/massage/send.png"
							mode="scaleToFill"></image>
					</view>
				</view>
			</view>
			<view class="tool_box" :class="{'show_tool_box': tool.show && (emoji.show || media.show)}">
				<view class="emoji_box tool_box_group" :class="{'show_tool_group': emoji.show}">
					表情
				</view>
				<view class="media_box tool_box_group" :class="{'show_tool_group': media.show}">
					<view class="tool_item" v-for="(item, index) in media.menus" @click="toolNavigate(item)">
						<view class="tool_icon_box">
							<image class="tool_icon" :src="item.icon" mode="scaleToFill"></image>
						</view>
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="red_packet" :class="{'show_red_packet': showRedPacket}">
			<view class="red_packet_mask"></view>
			<view class="red_packet_box big_box">
				<image class="packet_box_bg" src="../../static/images/massage/pic.jpg" mode="scaleToFill">
				</image>
				<view class="red_packet_gold" :class="{'opening': opening}" @click="_getRedPacketHandle">
					開
				</view>
				<!-- <view class="red_packet_top">
					<view class="red_packet_gold" :class="{'opening': opening}" @click="_getRedPacketHandle">
						開
					</view>
				</view>
				<view class="red_packet_sender">
					{{dept.teacherName}}的红包
				</view>
				<view class="red_packet_info">
					好好学习, 天天向上
				</view> -->
			</view>
			<view class="close_icon" @click="closeRedPacket">
				<image class="icon" src="../../static/images/massage/add_circle.png" mode="scaleToFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		grabRedPacket,
		getRedPacketLog,
		getDeptRedPacketInfo,
		queryStudentCardBalance
	} from '../../common/api/index.js';
	import {
		getTwoUserList
	} from '../../common/api/blank.js';
	import {
		_showLoading,
		_showToast
	} from '../../common/js/util.js'
	export default {
		data() {
			return {
				//已经接收到的消息
				messages: [],
				//已经加载完所有历史消息
				historyOnload: false,
				input: {
					focus: false,
					message: ''
				},
				tool: {
					show: false
				},
				emoji: {
					show: false
				},
				media: {
					show: false,
					menus: [{
						icon: '../../static/images/massage/red_box.png',
						title: '发红包',
						url: './tool/sendRedBox'
					}, {
						icon: '../../static/images/massage/notice.png',
						title: '发公告',
						url: '',
						making: true,
					}]
				},
				dept: {},
				profile: {},
				showRedPacket: false,
				deptRedPacketInfo: {},
				redPacketLog: {},
				opening: false,
				blankBinds: [],
				userId: '',
				isFrist: 0,
				phone: "",
				orgId: "",
				batId: ""
			};
		},
		onLoad(options) {
			this.dept = JSON.parse(options.dept)
			this.userId = uni.getStorageSync('s_userId')
			console.log(this.dept)
		},
		onShow() {
			this._getDeptRedPacketInfo()
		},
		methods: {
			//首充
			fristRecharge() {
				uni.navigateTo({
					url: `/pageMassage/redPacketRecharge/redPacketRecharge?batId=${this.batId}&orgId=${this.orgId}&phone=${this.phone}`
				})
			},
			showEmoji() {
				this.tool.show = this.emoji.show ? false : true;
				this.emoji.show = !this.emoji.show;
				this.media.show = false;
			},
			showMedia() {
				this.tool.show = this.media.show ? false : true;
				this.media.show = !this.media.show;
				this.emoji.show = false;
			},
			hideAction() {
				this.tool.show = false;
				this.emoji.show = false;
				this.media.show = false;
			},
			inputFocus() {
				this.input.show = true;
				// setTimeout(() => {
				// 	this.hideAction()
				// },600)
			},
			inputBlur() {
				this.input.show = false;
				this.hideAction()
			},
			toolNavigate(item) {
				if (item.making) {
					uni.showToast({
						icon: 'none',
						title: '敬请期待...',
					})
					return
				}
				uni.navigateTo({
					url: item.url + '?dept=' + JSON.stringify(this.dept)
				})
			},
			async _getDeptRedPacketInfo() {
				uni.showLoading({
					title: "加载中...",
					mask: true
				})
				let s_userId = uni.getStorageSync("s_userId");
				const result = await queryStudentCardBalance({
					userId: s_userId,
					bindType: '0'
				})
				if (result.code != 0) {
					_showToast('数据获取失败，请稍后重试')
					return
				}
				const profile = this.profile = result.data.students[0].students[0];

				const bindres = await getTwoUserList({
					userId: this.userId,
					orgId: profile.orgId
				})
				if (bindres.code == 0) {
					this.blankBinds = bindres.data
					if (this.blankBinds.length > 0) {
						this.isFrist = this.blankBinds[0].initialTopup
						this.phone = this.blankBinds[0].phone
						this.orgId = this.blankBinds[0].orgId
						this.batId = this.blankBinds[0].batId
					}

				} else {
					uni.hideLoading()
					_showToast('数据获取失败，' + res.msg)
				}
				const res = await getDeptRedPacketInfo({
					orgId: profile.orgId,
					deptId: this.dept.deptId
				})
				if (res.code == 0) {
					uni.hideLoading()
					this.deptRedPacketInfo = res.data
					this._getRedPacketLog()
				} else {
					_showToast('数据获取失败，请稍后重试')
				}
			},
			async _getRedPacketLog() {
				const res = await getRedPacketLog({
					orgId: this.profile.orgId,
					empId: this.profile.empId,
				})
				if (res.code == 0) {
					uni.hideLoading()
					this.redPacketLog = res.data[0]
				} else {
					uni.hideLoading()
					this.redPacketLog = {
						state: 1
					}
					// _showToast('数据获取失败，'+res.msg)
				}
			},
			showRedPacketHandle() {
				if (this.dept.teacher) return
				// this.redPacketLog.state = 1
				if (this.redPacketLog.state == 1) {
					this.showRedPacket = true
				} else {
					uni.navigateTo({
						url: '../myRedPacket/redPacketDetails?dept=' + JSON.stringify(this.dept)
					})
				}
			},
			closeRedPacket() {
				this.showRedPacket = false
			},
			async _getRedPacketHandle() {
				this.opening = true
				const redPacket = await grabRedPacket({
					orgId: this.profile.orgId,
					empId: this.profile.empId
				})
				setTimeout(() => {
					this.opening = false
					if (redPacket.code == 0) {
						uni.hideLoading()
						this.closeRedPacket()
						uni.navigateTo({
							url: '../myRedPacket/redPacketDetails?dept=' + JSON
								.stringify(this.dept)
						})
					} else {
						uni.hideLoading()
						_showToast('数据获取失败，' + redPacket.msg)
					}
				}, 2000)
			},
			toBindBlank() {
				uni.navigateTo({
					url: '/pageBlank/quickPayment/quickPayment?orgId=' + this.profile.orgId + '&batId=' + this.batId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chat_container {
		height: 100vh;
		width: 100vw;
		background-color: #f5f5f5;
	}

	.chat_massege_box {
		height: calc(100vh - 120rpx);
		padding: 24rpx 0;
		text-align: center;
		color: #999;
		font-size: 20rpx;
		box-sizing: border-box;

		.msg_item {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;
			padding: 24rpx;
			box-sizing: border-box;
		}

		.sender_header {
			width: 70rpx;
			height: 70rpx;
			border-radius: 12rpx;
			overflow: hidden;
			background-color: #FFF;

			image {
				width: 70rpx;
				height: 70rpx;
			}
		}

		.item_content {
			padding: 0 24rpx;

			.sender_nickname {
				font-size: 20rpx;
				color: #999;
				text-align: left;
				padding: 6rpx;
			}
		}
	}

	.msg_tip {
		color: #999;
		font-size: 24rpx;

		&.msg_red {
			color: #e54716;
		}

		.msg_tip_name {
			color: #999;
		}

		.tip_hanld {
			text-align: center;
			font-size: 24rpx;
			color: #2643ff;
			text-decoration: underline;
		}
	}

	.red_packet_info {
		position: relative;
		top: 24rpx;
		padding: 6rpx 0;
		font-size: 26rpx;
		color: #eac866;
	}

	.red_packet_box {
		height: 350rpx;
		width: 250rpx;
		border-radius: 12rpx;
		background-color: #e54716;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		&.getRedpacket {
			background-color: #df8b8b;

			.red_packet_top {
				background-color: #ffe4e5;
				box-shadow: inset 0px 0px 4px 0px #822b10;
			}
		}
	}

	.red_packet_top {
		position: absolute;
		top: -500rpx;
		height: 600rpx;
		width: 600rpx;
		border-radius: 50%;
		box-shadow: 0px 0px 4px 0px #822b10;
	}

	.red_packet_gold {
		position: absolute;
		bottom: -35rpx;
		left: 50%;
		margin-left: -35rpx;
		height: 70rpx;
		width: 70rpx;
		border-radius: 50%;
		background-color: #eac866;
		box-shadow: 0px 1px 2px 0px #846a00;
		text-align: center;
		line-height: 70rpx;
		color: #574700;
		font-size: 26rpx;

		&.opening {
			animation: open_red_packet 2s infinite;
		}
	}

	@keyframes open_red_packet {
		0% {
			transform: rotateY(0deg);
		}

		100% {
			transform: rotateY(720deg);
		}
	}

	.red_packet {
		display: none;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;

		&.show_red_packet {
			display: block;
		}

		.red_packet_mask {
			width: 100%;
			height: 100%;
			background-color: rgba(255, 255, 255, 0.4)
		}

		.red_packet_box.big_box {
			height: 800rpx;
			width: 486rpx;
			position: absolute;
			top: 140rpx;
			left: 50%;
			margin-left: -243rpx;

			// ********* new ********
			.packet_box_bg {
				height: 800rpx;
				width: 486rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			.red_packet_gold {
				bottom: 110rpx;
				left: 50%;
				margin-left: -80rpx;
				height: 140rpx;
				width: 140rpx;
				line-height: 140rpx;
				color: #574700;
				font-size: 50rpx;
			}

			// ******** new *********
			.red_packet_top {
				top: -1200rpx;
				height: 1400rpx;
				width: 1400rpx;

				.red_packet_gold {
					bottom: -80rpx;
					left: 50%;
					margin-left: -80rpx;
					height: 160rpx;
					width: 160rpx;
					line-height: 160rpx;
					color: #574700;
					font-size: 60rpx;
				}
			}

			.red_packet_info {
				font-size: 40rpx;
			}

			.red_packet_sender {
				padding: 36rpx 0;
				font-size: 30rpx;
				color: #eac866;
			}
		}

		.close_icon {
			width: 64rpx;
			height: 64rpx;
			position: absolute;
			left: 50%;
			margin-left: -32rpx;
			bottom: 360rpx;
			transform: rotate(45deg);

			.icon {
				width: 64rpx;
				height: 64rpx;
			}
		}
	}

	.action_box {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #F9F9F9;

		&::after {
			content: "";
			height: 1px;
			transform: scaleY(0.5);
			background-color: #ccc;
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
		}

		.send_box {
			height: 120rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 12rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;

			.input_box {
				flex: 1;
				height: 72rpx;
				line-height: 72rpx;
				background-color: #FFF;
				border-radius: 12rpx;
				margin: 0 24rpx;
				box-sizing: border-box;
				position: relative;

				input {
					top: -24rpx;
					position: absolute;
					height: 120rpx;
					width: 100%;
					padding: 12rpx 24rpx;
					box-sizing: border-box;
					text-align: center;
				}
			}

			.icon {
				width: 64rpx;
				height: 64rpx;
			}

			.send_btn {
				padding: 0 0 12rpx 12rpx;
			}
		}

		.tool_box {
			height: 0;
			position: relative;
			transition: all 0.2s;

			&.show_tool_box {
				height: 500rpx;
				z-index: 0;
			}
		}

		.tool_box_group {
			display: none;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 24rpx;
			box-sizing: border-box;
			height: 0;
			position: relative;
			opacity: 0;
			z-index: -10;

			&::after {
				content: "";
				height: 1px;
				transform: scaleY(0.5);
				background-color: #ccc;
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
			}

			&.show_tool_group {
				display: flex;
				height: 500rpx;
				opacity: 1;
				z-index: 0;
				transition: all 0.2s 0.2s;
			}
		}
	}

	.tool_item {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		font-size: 24rpx;
		color: #999;
		width: calc(100% / 4);
		height: 170rpx;
		padding: 24rpx 0;

		.tool_icon_box {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 100rpx;
			background-color: #FFF;
			border-radius: 24rpx;
		}

		.tool_icon {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.input_disabled {
		text-align: center;
	}
</style>